<template>
  <!--模板-->
  <h1>失去响应性的各种情况 —— 响应的示例</h1>
  arr：{{ arr }}<br>
  <el-button type="" @click="change1">直接赋值 ref.value</el-button><br>
  <el-button type="" @click="change2">ref.value[0]</el-button><br>

  <hr>
  <son :listRef="arr" :listReactive="arr"></son>
</template>


<script setup lang="ts" generic="T extends {name: string}">
  import { reactive, ref, watch } from 'vue'
  import son from './son2.vue'
    
  const arr = ref([{
    name: 'jyk'
  }])

  watch(arr, () => {
    console.log('父组件： watch arr：',arr)
  })
  watch(arr, () => {
    console.log('父组件：手动深层 watch arr：',arr)
  },{deep:true})

  watch(() => arr, () => {
    console.log('父组件： watch () => arr：',arr)
  })
  watch(() => arr.value, () => {
    console.log('父组件： watch () => arr.value：',arr)
  })
  watch(() => arr.value, () => {
    console.log('父组件：手动深层 watch () => arr.value：',arr)
  },{deep:true})


  const change1 = () => {
    arr.value = [{name: 'jyk9999'}]
  }

  const change2 = () => {
    arr.value[0] = {name: 'jyk3333'}
  }

</script>